import React, { useState, useEffect } from 'react'
import  Taro from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'

import store from "../../../store";

function Like ({ likeInfo }) {

  const [likeNavIndex, uselikeNavIndex] = useState(store.getState().likeNavIndex)

  useEffect(() => {
    // 监听全局数据变化，一旦改变重新设置当前下标
    store.subscribe(storeChange)
  }, [])

  // 修改redux的值
  function repairLikeNavIndex (index) {
    const action = {
      type: 'change_like_nav_index',
      index
    }
    store.dispatch(action)
  }
  // 监听全局redux数据变化
  function storeChange () {
    uselikeNavIndex(store.getState().likeNavIndex)
  }
  // 前往商品详情
  function goToCommdetail(item){
    Taro.navigateTo({
      url: '/pages/commdetail/index'
    })
  }
  return (
    <View className='like'>
      {/*导航*/}
      <View className='like_nav'>
        {
          store.getState().likeNav.map((item, index) => {
            return (
              <View className={` like_nav_item ${index === likeNavIndex ? 'isShowlikeNav' : ''}`}
                onClick={() => { repairLikeNavIndex(index) }}
              >
                <Text className='nav_item_one'>{item.text}</Text>
                <Text className='nav_item_two'>{item.childText}</Text>
              </View>
            )
          })
        }
      </View>
      {/*详情*/}
      <ScrollView
        scrollY
        enableFlex
        className='like_detail'>
        {
          likeInfo.map((item, index) => {
            return (
              <View className='like_detail_item' onClick={() => {goToCommdetail(item)}}>
                <Image className='like_it_img' src={item.url} />
                <Text className='it_tit'>
                  {item.title}
                </Text>
                <Text className='it_js'>剩余{item.quantity}件</Text>
                <View className='it_foo'>
                  <Text className='it_jg'>￥{item.price}</Text>
                  <Text className='it_qg'>立即抢购</Text>
                </View>
              </View>
            )
          })
        }

      </ScrollView>
    </View>
  )
}

export default Like
